<template>
	<!-- 搜索框 -->
	<view class="search-container">
		<u-search v-model="keywords" placeholder="搜索商品" @custom="handleSearch" shape="round" bg-color="#fff"
			:show-action="true" action-text="搜索" :clearabled="true" :animation="true"></u-search>
	</view>

	<!-- 瀑布流 -->
	<view class="waterfall-container">
		<u-waterfall v-model="waterfallList">
			<template v-slot:left="{leftList}">
				<view class="goods-item" v-for="(item, index) in leftList" :key="'left'+index">
					<u-lazy-load threshold="-450" border-radius="8" :image="item.image.split(',')[0]" :index="index"
						img-mode="aspectFill" @click="navigateToDetail(item)"></u-lazy-load>
					<view class="goods-info">
						<view class="title u-line-2">{{item.goodsName}}</view>
						<view class="price">¥{{item.price}}</view>
						<view class="meta">
							<text class="category">{{item.categoryName}}</text>
						</view>
					</view>
				</view>
			</template>
			<template v-slot:right="{rightList}">
				<view class="goods-item" v-for="(item, index) in rightList" :key="'right'+index">
					<u-lazy-load threshold="-450" border-radius="8" :image="item.image.split(',')[0]" :index="index"
						img-mode="aspectFill" @click="navigateToDetail(item)"></u-lazy-load>
					<view class="goods-info">
						<view class="title u-line-2">{{item.goodsName}}</view>
						<view class="price">¥{{item.price}}</view>
						<view class="meta">
							<text class="category">{{item.categoryName}}</text>
						</view>
					</view>
				</view>
			</template>
		</u-waterfall>
		<u-loadmore :status="loadStatus" :icon-type="iconType" :load-text="loadText" />
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onReady,
		onReachBottom,
		onShow
	} from '@dcloudio/uni-app'
	import {
		getWaterfallListApi
	} from '../../api/index.js'

	const keywords = ref('')
	const waterfallList = ref([])
	const currentPage = ref(1)
	const pageSize = ref(10)
	const pages = ref(0)
	const loadStatus = ref('loadmore')

	// 加载状态配置
	const iconType = ref('circle')
	const loadText = ref({
		loadmore: '上拉加载更多',
		loading: '正在加载...',
		nomore: '已经到底啦~'
	})

	// 搜索处理
	const handleSearch = () => {
		console.log('搜索处理', keywords.value)
		if (!keywords.value.trim()) {
			uni.showToast({
				title: '请输入搜索内容',
				icon: 'none'
			})
			return
		}

		uni.navigateTo({
			url: `/pages/search/search?keyword=${keywords.value.trim()}`
		})
	}

	// 获取瀑布流数据
	const getWaterfallList = async () => {
		loadStatus.value = 'loading'
		try {
			let res = await getWaterfallListApi({
				currentPage: currentPage.value,
				pageSize: pageSize.value
			})

			if (res && res.code == 200) {
				console.log(res)
				waterfallList.value = [...waterfallList.value, ...res.data.records]
				pages.value = res.data.pages
				loadStatus.value = res.data.current < res.data.pages ? 'loadmore' : 'nomore'
			}
		} catch (error) {
			console.error('加载失败:', error)
			loadStatus.value = 'loadmore'
		}
	}

	// 加载更多
	const loadMore = () => {
		if (loadStatus.value === 'loadmore') {
			currentPage.value++
			getWaterfallList()
		}
	}

	// 点击商品跳转时
	const navigateToDetail = (item) => {
		uni.navigateTo({
			url: `/pages/detail/detail?goods=` + JSON.stringify(item)
		})
	}
	onReady(() => {})
	onShow(() => {
		// 重置分页和数据
		currentPage.value = 1
		waterfallList.value = []
		loadStatus.value = 'loadmore' // 重置加载状态
		getWaterfallList()
	})
	onReachBottom(() => {
		loadMore()
	})
</script>

<style lang="scss">
	.search-container {
		padding: 20rpx;
		background-color: #f7f7f7;
		position: sticky;
		top: 0;
		z-index: 10;
	}

	.waterfall-container {
		padding: 20rpx;

		.goods-item {
			margin: 0 10rpx 10rpx;
			/* 左右10rpx，底部20rpx */
			margin-bottom: 20rpx;
			background-color: #fff;
			border-radius: 12rpx;
			overflow: hidden;
			box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.12);

			.goods-info {
				padding: 20rpx;

				.title {
					font-size: 28rpx;
					color: #333;
					line-height: 1.4;
					margin-bottom: 10rpx;
				}

				.price {
					font-size: 32rpx;
					color: #f56c6c;
					font-weight: bold;
					margin-bottom: 10rpx;
				}

				.meta {
					display: flex;
					font-size: 24rpx;
					color: #999;

					.category {
						flex: 1;
					}
				}
			}
		}
	}
</style>